<template>
  <view class="page-main">
    <view class="header">
      <view class="info">
        <view class="name">姓名: {{myInfo.user_name || '无'}}</view>
<!--        <view class="intention">意向:{{'租'+ myInfo.intention}}</view>-->
        <view class="phone">电话:{{myInfo.phone ||
          '无'}}</view>
      </view>
      <view class="title">详情图</view>
    </view>
    <view class="detail-image" >
      <swiper class="swiper-container" circular="true" :autoplay="false" indicator-dots="true">
        <swiper-item class="swiper-item" v-for="(item, index) in photosToShow" :key="index">
          <image class="image-item" :src='item' @tap="preview(photosToShow)"></image>
        </swiper-item>
      </swiper>
  
      
    </view>
  </view>
</template>

<script>
  import {uniGetStorageSync, uniPreviewImage} from "../../util/funcs"
  import {ROUTER_OBJ, d_uniShowToast} from "../../util/misc"
  import {tokenRequest} from "../../util/network"

  export default {
    data() {
      return {
        myInfo:{no: "none", phone: "none", named: "none"},
        intention: '',
        photosToShow :[],
      }
      

    },
    mounted() {
      let routerParam = uniGetStorageSync(ROUTER_OBJ)
      let postData = {
        id: routerParam.id,
        type_id: routerParam.type_id
      }
      // console.log('postData: ',postData)
      tokenRequest('/my_order', postData, {
        success: ({data}) => {
          // console.log('/my_order ',data)
          let res = data.data
          this.photosToShow = res.contract
          this.myInfo ={
            ...res.buyer,
            ...res.user
          }
        }
      })
     
    },
    methods:{
      preview(imgs) {
        uniPreviewImage(imgs)
      },

    }
  }
</script>

<style scoped lang="scss">
  @import "../../assets/styles/global";
  
  page {
    background-color: $greyBackgroundColor;
    
  }
  
  .page-main {
    padding-top: 10px;
    
    .header {
      width: 100vw;
      height: 22vw;
      font-size: 14px;
      background-color: white;
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
      color: #232323;
      display: flex;
      flex-direction: column;
      .info {
        @include center;
        padding: 0 16px ;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        .name{
          max-width: 33vw;
          @include ellipsis;
        }
        .intention{
          max-width: 33vw;
          @include ellipsis;
        }
        .phone{
          max-width: 33vw;
          @include ellipsis;
        }
      }
      
      .title {
        height: 50%;
        width: 100vw;
        border-top: 1px solid $greyBorderColor;
        @include center;
        font-size: 18px;
      }
    }
    
    .detail-image {
      height: 141vw;
      width: 100vw;
      @include center;
      background-color: white;
      .swiper-container{
        @include center;
        width: 100%;
        height: 100%;
        .swiper-item{
          width: 100%;
          height: 100%;
          .image-item{
            width: 100vw;
            max-height: 141vw;
          }
        }
        
      }
    }
  }
</style>
